<template>
    <el-card class="box-card">
      <!-- 卡片顶部添加品牌按钮 -->
      <el-button type="primary" size="default" icon="Plus">添加品牌</el-button>
  
      <!-- 表格组件：用于展示已有得平台数据 -->
      <!-- border:可以设置表格纵向是否有边框 -->
      <el-table style="margin: 10px 0px;" border>
        <el-table-column label="序号" width="80px" align="center"></el-table-column>
        <el-table-column label="品牌名称"></el-table-column>
        <el-table-column label="品牌logo"></el-table-column>
        <el-table-column label="品牌操作"></el-table-column>
      </el-table>
  
      <!-- 分页器组件
          pagination
              v-model:current-page:设置分页器当前页码
              v-model:page-size:设置每一个展示数据条数
              page-sizes:用于设置下拉菜单数据
              background:设置分页器按钮的背景颜色
              layout:可以设置分页器六个子组件布局调整了，其中->表示在右侧展示
      -->
      <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3,5,7,9]"
         :background="background" layout="prev, pager, next, jumper,->,total, sizes, "
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
  </template>
  
  <script setup lang="ts">
  // 引入组合式api函数ref
  import {ref} from 'vue';
  // 当前页码
  let pageNo = ref<number>(1);
  
  // 每一页展示多少条数据
  let limit = ref<number>(1);
  </script>
  
  <style scoped></style>